<template>
  <div class="ma-content-block lg:flex flex-col justify-start p-4">
    <div class="lg:w-8/12">
      <!-- 表单区域 -->
      <a-form ref="formRef" :model="form" :rules="rules">
        <!-- 表单项 -->
        <a-form-item field="msg_type" label="消息类型">
          <a-radio-group v-model="form.msg_type">
            <a-radio value="text">文本</a-radio>
            <a-radio value="markdown">markdown</a-radio>
            <a-radio value="image">图片</a-radio>
            <a-radio value="news">图文</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item field="content" label="文本内容" v-if="isShow('text')">
          <a-textarea
            v-model="form.content"
            :allow-clear="true"
            :max-length="2048"
            :show-word-limit="true"
            :auto-size="{
              minRows: 2,
              maxRows: 8,
            }"
          />
        </a-form-item>

        <a-form-item
          label="markdown内容"
          field="markdown_content"
          v-if="isShow('markdown')"
        >
          <MdEditor v-model="form.markdown_content" />
        </a-form-item>

        <a-form-item label="图片" field="image" v-if="isShow('image')">
          <sa-upload-image v-model="form.image" />
        </a-form-item>

        <a-form-item label="标题" field="title" v-if="isShow('news')">
          <a-input v-model="form.title" />
        </a-form-item>

        <a-form-item field="description" label="描述" v-if="isShow('news')">
          <a-textarea
            v-model="form.description"
            :allow-clear="true"
            :max-length="500"
            :show-word-limit="true"
            :auto-size="{
              minRows: 2,
              maxRows: 8,
            }"
          />
        </a-form-item>

        <a-form-item label="跳转链接" field="url" v-if="isShow('news')">
          <a-input v-model="form.url" />
        </a-form-item>

        <a-form-item label="图片链接" field="picurl" v-if="isShow('news')">
          <a-input v-model="form.picurl" />
        </a-form-item>

        <a-form-item>
          <a-button type="primary" @click="push">推送</a-button>
        </a-form-item>
      </a-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Message } from '@arco-design/web-vue'
import pushApi from "@/api/hiadmin/push";
import { MdEditor } from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
const formRef = ref();
//表单初始化
const form = reactive({
  msg_type: "text",
  content: "",
  markdown_content: "",
  image: "",
  title: "",
  description: "",
  url: "",
  picurl: "",
});

// 验证规则
const rules = {
  content: [{ required: true, message: "文本内容不能为空" }],
  markdown_content: [{ required: true, message: "markdown内容不能为空" }],
  title: [{ required: true, message: "标题不能为空" }],
  url: [{ required: true, message: "跳转链接不能为空" }],
};

//是否显示隐藏
const isShow = (msgType) => {
  return form.msg_type === msgType;
};
const push = async () => {
  const validate = await formRef.value?.validate();
  console.log(validate);
  //undefined 表示验证通过
  if (!validate) {
    let data = { ...form };
    const response = await pushApi.msgPush(data);
    if (response.code === 200) {
      Message.success(response.message);
    }
  }
};
</script>

<style scoped></style>
